<template>
  <a-modal v-model:visible="visible" title="选择问卷" @ok="handleOk" @cancel="handleCancel">
    <a-table :row-selection="rowSelection" :columns="columns" :data-source="data" :pagination="false" :scroll="{ y: '50vh' }" rowKey="id" size="small"> </a-table>
  </a-modal>
</template>
<script lang="ts">
import { message } from 'ant-design-vue'
import 'ant-design-vue/es/message/style/css'
import { defineComponent, onUpdated, ref, Ref } from 'vue'
import { get } from '../../utils/request/request'

interface DataType {
  id: number
  title: string
  start_time: string
  end_time: string
  status: number
  count: number
  create_by: string
  create_time: string
}

interface SelectType {
  id: number | undefined
  title: string
  start_time: string
  end_time: string
  status: number | undefined
  count: number | undefined
  create_by: string
  create_time: string
}

const useTabelEffect = (token: string) => {
  const columns = [
    { title: '问卷标题', dataIndex: 'title', width: '30%' },
    { title: '开始时间', dataIndex: 'start_time', width: '20%' },
    { title: '结束时间', dataIndex: 'end_time', width: '20%' },
    { title: '创建人', dataIndex: 'create_by', width: '20%' }
  ]
  let data: Ref<DataType[]> = ref([])
  const chosItem = ref<SelectType>({
    id: undefined, //问卷id
    title: '', //问卷标题
    start_time: '', //开始时间
    end_time: '', //截止时间
    status: undefined, //问卷状态：0.未发布、1.已发布、2.已结束
    count: undefined, //填写数量
    create_by: '', //创建人
    create_time: '' //创建时间
  })

  const rowSelection = {
    type: 'radio',
    onSelect: (record: SelectType) => {
      // emit("chosTitle", record);
      chosItem.value = record
    }
  }
  const getData = async () => {
    const res: any = await get('/admin/api/v1/paper/list?page=1&limit=1000', token)
    if (!res.data) {
      message.warn('没有问卷数据')
    } else {
      const modifiedData = res.data
      modifiedData.forEach((paper: any) => {
        paper.start_time = paper.start_time.trim().split(/\s+/)[0]
        paper.end_time = paper.end_time.trim().split(/\s+/)[0]
      })
      data.value = modifiedData
    }
  }
  return {
    data,
    columns,
    rowSelection,
    chosItem,
    getData
  }
}

const useModalEffect = (emit: any, chosItem: Ref<SelectType>) => {
  const visible = ref<boolean>(false)
  const showModal = () => {
    visible.value = true
  }
  const handleOk = () => {
    emit('chosTitle', chosItem.value)
    visible.value = false
  }
  const handleCancel = () => {
    // emit("chosTitle", {
    //   id: undefined,
    //   title: "",
    // });
  }
  return {
    visible,
    showModal,
    handleOk,
    handleCancel
  }
}

export default defineComponent({
  emits: ['chosTitle'],
  setup(props, { emit }) {
    const token: string = localStorage.getItem('token') as string
    const { data, columns, rowSelection, chosItem, getData } = useTabelEffect(token)
    const { visible, showModal, handleOk, handleCancel } = useModalEffect(emit, chosItem)
    onUpdated(() => {
      if (visible.value) {
        getData()
      }
    })
    return {
      visible,
      showModal,
      handleOk,
      handleCancel,
      data,
      columns,
      rowSelection,
      chosItem
    }
  }
})
</script>

<style lang="less" scoped></style>
